<template>
  <section>
    <van-sticky>
      <PageHeader title="管理员"/>
    </van-sticky>

    <van-form @submit="onFormSubmit">
      <van-field
        v-model="formData.username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请输入用户名' }]"
        :readonly="formData.id>0 ? true : false"
      />

      <van-field
        v-model="formData.real_name"
        name="real_name"
        label="姓名"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />

      <van-field
        v-model="formData.mobile"
        name="mobile"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请输入手机号' }]"
      />

      <van-field
        v-model="formData.password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        type="password"
      />

      <van-field
        v-model="formData.repeat_password"
        name="repeat_password"
        label="再次输入密码"
        placeholder="请输入密码"
        type="password"
      />

      <div class="flex flex-row flex-center bg-color-white" style="padding: 10px 16px;">
        <div class="flex flex-row flex-left text-center font-big" style="width: 90px;">
          角色
        </div>
        <div class="flex flex-row flex-left flex-1">
          <van-checkbox-group v-model="formData.roleIds" direction="horizontal">
            <van-checkbox shape="square" :name="item.id" v-for="(item, index) in roles" :key="index">{{item.name}}</van-checkbox>
          </van-checkbox-group>
        </div>
      </div>

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
          保存
        </van-button>
      </div>
    </van-form>

  </section>
</template>

<script>
import PageHeader from "../componets/PageHeader";
import {adminInfoUri, adminPasswordUri, adminSubmitUri, roleAllUri, roleInfoUri} from "../../common/api";

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      formData: {id: 0, username: '', real_name: '', mobile: '', password: '', repeat_password: '', roleIds: []},
      roles: []
    }
  },
  methods: {
    onFormSubmit(values) {
      if(this.formData.password.length > 0 && this.formData.password != this.formData.repeat_password) {
        this.$toast.fail('两次输入的密码不一致');
        return;
      }
      const that = this;
      that.$http.post(adminSubmitUri, that.formData, {emulateJSON: true}).then(response => {
        let {msg, code, data} = response.body
        if (code != 0) {
          that.$toast.fail(msg);
        } else {
          that.$toast.success('保存成功');
          that.$router.back();
        }
      }, response => {
        that.$toast.fail('发生错误');
      })
    },
    getInfo() {
      const that = this;
      this.$http.get(adminInfoUri + '?id=' + this.$route.params.id).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.$toast.fail(msg);
        } else {
          let formData = this.formData;
          for(let key in this.formData) {
            if(key == 'password' || key == 'repeat_password') {
              continue;
            }
            formData[key] = data[key];
          }
          this.formData = formData;
        }
      }, response => {
        // error callback
      })
    },
    getRoles() {
      const that = this;
      this.$http.get(roleAllUri).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.$toast.fail(msg);
        } else {
          that.roles = data;
        }
      }, response => {
        // error callback
      })
    }
  },
  mounted: function () {
    this.getRoles();
    if(this.$route.name == 'AdminEdit') {
      this.getInfo();
    }
  }
}
</script>

<style scoped>

</style>
